﻿
@model IEnumerable<GUI.Models.ArticleModel>

@{
    ViewBag.Title = "Index";

}




@section dashboard
{
<div class="row">
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-aqua">
                                <div class="inner">
                                    <h3>
                                        150
                                    </h3>
                                    <p>
                                        New Orders
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-bag"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    More info <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div><!-- ./col -->
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-green">
                                <div class="inner">
                                    <h3>
                                        53<sup style="font-size: 20px">%</sup>
                                    </h3>
                                    <p>
                                        Bounce Rate
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-stats-bars"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    More info <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div><!-- ./col -->
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-yellow">
                                <div class="inner">
                                    <h3>
                                        44
                                    </h3>
                                    <p>
                                        User Registrations
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-person-add"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    More info <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div><!-- ./col -->
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-red">
                                <div class="inner">
                                    <h3>
                                        65
                                    </h3>
                                    <p>
                                        Unique Visitors
                                    </p>
                                </div>
                                <div class="icon">
                                    <i class="ion ion-pie-graph"></i>
                                </div>
                                <a href="#" class="small-box-footer">
                                    More info <i class="fa fa-arrow-circle-right"></i>
                                </a>
                            </div>
                        </div><!-- ./col -->
      </div><!-- /.row -->


}





@section KnockoutJs{

    <script type="text/javascript" src="~/Scripts/knockout-3.2.0.js"></script>
    <script type="text/javascript" src="~/Scripts/knockout-3.2.0.debug.js"></script>
    <script type="text/javascript" src="~/Scripts/knockout.mapping-latest.js"></script>
    
}

@{
    var jTableStyle = "metro/blue/jtable.css";
    if (!string.IsNullOrEmpty(Request["jTableStyle"]))
    {
        jTableStyle = Request["jTableStyle"];
    }
}



<div id="tele">

</div>


    <link href="@Url.Content("~/Content/Jtable/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jtable/themes/metroblue/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/Jtable/highlight.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/jtable/themes/" + jTableStyle)" rel="stylesheet" type="text/css" />

    

    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shCore.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Scripts/syntaxhighligher/styles/shThemeDefault.css")" rel="stylesheet" type="text/css" />
     <script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.9.2.min.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/syntaxhighligher/shCore.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushJScript.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushXml.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushCSharp.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/syntaxhighligher/shBrushSql.js")" type="text/javascript"></script>

    <script src="@Url.Content("~/Scripts/jtablesite.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jtable/jquery.jtable.js")"></script>
    

<style>
    
 

   
  .child-opener-image
        {
            cursor: pointer;
        }
        .child-opener-image-column
        {
            text-align: center;
        }
        .jtable-dialog-form
        {
            min-width: 220px;
        }
        .jtable-dialog-form input[type="text"]
        {
            min-width: 200px;
        }


        div.filtering
        {
            border: 1px solid #999;
            margin-bottom: 5px;
            padding: 10px;
            background-color: whitesmoke;
        }



   
    
    #selrow {
        background-color:#0094ff;
        display:none;
    }

    .authordetail {
        padding:2em;
      color: rgba(0,0,0,0.6);
       text-shadow: 0 0 5px #fff, 0 -5px 5px #ccc, 2px -10px 6px #ddd, -2px -15px 11px #eee, 2px -18px 18px #fff;
     
    }
    #DeleteAllButton {
        background-color:red;
        display:none;
    }
   
    
    </style>


            <div class="box box-primary">
                                <div class="box-header">
                                    <h3 class="box-title"> Articles </h3>
                                </div><!-- /.box-header -->
      <script type="text/javascript">
     

         
        
           
      
       
          
  
        
             

           $(function () {
               // $("#datenamecheckresearch").datepicker();

               var date = $('#datenamecheckresearch').datepicker({ dateFormat: 'dd-mm-yy' }).val();
           });
      
      </script>
@* template jquery with object  *@
@section authorName
{


  <div id ="auth">

  </div>
        <script id ="authortemplate" type="tuts/template">
           <h2>{{nameAuthor}} {{lastnameAuthor}} </h2> 
            <h2>{{profileAuthor}}</h2>
             <h2>{{ProfileMailAuthor}}</h2>
            </script>
        
    

    <script src="~/Scripts/jquery-1.7.1.js"></script>

  <script> 
 (function(){
     
         var   author = @Html.Raw(Json.Encode(ViewBag.author));
               container=  $('#auth');
   
         var AuthorObj ={
                         nameAuthor: author.Name,
                         lastnameAuthor:author.Lastname,
                         profileAuthor:author.Profil,
                         ProfileMailAuthor: author.Adressmail
                         }
                  
           template=$.trim($('#authortemplate').html());
         
               frag='';
               frag+= 
                  template
                   .replace(/{{nameAuthor}}/ig,AuthorObj.nameAuthor)
                   .replace(/{{lastnameAuthor}}/ig,AuthorObj.lastnameAuthor)
                   .replace(/{{profileAuthor}}/ig,AuthorObj.profileAuthor)
                  .replace(/{{ProfileMailAuthor}}/ig,AuthorObj.ProfileMailAuthor);
                  

               container.addClass('authordetail');
    
               $('<span>'+frag+'</span>',{
                 
               }).appendTo(container)
                 .on('click',function(){
                     console.log('u will updated');
                  });
                   
              
 })();
     </script>
   
    
  
    }

      
            
      




  

  <!-- An area to show selected rows (for demonstration) -->

@section OpenCreateArticle{
           
  <link href="~/Content/AdminLTE/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="~/Content/AdminLTE/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Theme style -->
        <link href="~/Content/AdminLTE/css/AdminLTE.css" rel="stylesheet" type="text/css" />

                <link href="~/Content/AdminLTE/css/ionicons.css" rel="stylesheet" />

                 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <!-- Bootstrap -->
      <script src="~/Content/AdminLTE/js/app.js"></script>
                <script src="~/Content/AdminLTE/js/bootstrap.min.js"></script>
    <div class="margin">
                                      
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-info btn-flat">Action</button>
                                            <button type="button" class="btn btn-info btn-flat dropdown-toggle" data-toggle="dropdown">
                                                <span class="caret"></span>
                                                <span class="sr-only">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu" role="menu">
                                                <li>@Html.ActionLink(" (+) Article","Create", new {set02568auId = @ViewBag.session})</li>
                                                   
                                            </ul>
                                        </div>
                                        
                                  
                                    </div>               


   
}
  


<div class="filtering">
    <form>
        <table>
            <tr>
                <td style="width:10%" ><label>Date:</label>  </td>
                <td  style="width:70%"> <input type="text" name="date" id="datenamecheckresearch" /></td>
                <td  style="width:1%"> <input type="image" id="LoadRecordsButton" src="~/Images/load.gif" alt="submit"></td>
            </tr>
        </table>
        
    
    
    </form>
</div>




<div id="StudentTableContainer">
</div>
<br />
<button id="DeleteAllButton"> X </button>
  
<br /> <br />
@*Selected rows (refreshed on <b>selectionChanged</b> event):*@



         

<div id="SelectedRowList">
  <span id="selrow">  </span>
</div>

  

    <script type="text/javascript">
        $(document).ready(function () {
           var $del= $("#DeleteAllButton");
            $('#StudentTableContainer').jtable({
           
                title: 'Articles',
                paging: true,
                pageSize: 3,
                sorting: true,
                defaultSorting: 'Name ASC',
                selecting: true, //Enable selecting
                multiselect: true, //Allow multiple selecting
                selectingCheckboxes: true, //Show checkboxes on first column
                defaultSorting: 'Name ASC',

                actions: {
                    listAction: '@Url.Action("ArticleListByFiter")',
                    deleteAction:'@Url.Action("DeleteArticle")',
                    updateAction:'@Url.Action("UpdateArticle")'
                },
          fields: {
   
                    Id: {
                     
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                       
                      },



                    
                    

                    Title:{

                        title: 'Titre',
                        sorting: true,
                        width: '15%'
                       
                    },
                   




                    CreationDate:{

                        title: 'Date',
                        width: '10%',
                        type: 'date',
                        sorting:true,
                        displayFormat: 'yy-mm-dd'
                    },

                  

                    ArticleContenent:{

                        title: 'Article',
                        width: '70%',
                        edit:false,
                        display: function (data) {
                            if (data.record) {
                                return ' <a href="/Articles/Details/'+data.record.EncodeId + '">'+data.record.ArticleContenent+ '</a>';
                            }
                        }
                    },

              
                    Themes:{

                        title: '',
                        width: '5%',
                        sorting: false,
                        edit: false,
                        create: false,
                        display: function (Data) {
                            //Create an image that will be used to open child table
                            var $img = $('<img src="/Content/images/arrow_down.png" title="Sujets" />');
                            //Open child table when user clicks the image
                            $img.click(function () {
                                $('#StudentTableContainer').jtable('openChildTable',
                                        $img.closest('tr'),
                                        {
                                            title: Data.record.Title + ' - Article Title  ',
                                            actions: {
                                                listAction: '/Articles/GetThemeList?Id=' +Data.record.Id,
                                                deleteAction: '/Articles/DeleteThemes',
                                                updateAction: '/Articles/Updatethemes'
                                                //createAction: '/Demo/CreatePhone'
                                            },
                                            
                                            fields: {
                                                Id: {
                                                    key: true,
                                                    create: false,
                                                    edit: false,
                                                    list: false
                                                },

                                                Subjects: {
                                                    title: 'Subjects',
                                                    width: '30%'
                                                   
                                                },
                                               
                                                ArticleId: {
                                                    type: 'hidden',
                                                    defaultValue: Data.record.ArticleId
                                                },
                                               
                                               
                                            }
                                        }, function (data) { //opened handler
                                            data.childTable.jtable('load');
                                        });
                            });
                            //Return image to show on the person row
                            return $img;
                        }
                    }
                   
                 
          },
                //Register to selectionChanged event to hanlde events
          selectionChanged: function () {
              debugger
              //Get all selected rows
            
              var $selectedRows = $('#StudentTableContainer').jtable('selectedRows');

              $('#SelectedRowList').empty();
              if ($selectedRows.length > 0) {
                  //Show selected rows
                  $del.show()
                  $selectedRows.each(function () {
                      var record = $(this).data('record');
                      $('#SelectedRowList').append(
                          '<b>Article</b>: ' +record.ArticleContenent +'<br /><br />'
                        
                
                          );
                  });
              } else {
                  //No rows selected
                  $del.hide();
                  $('#SelectedRowList').hide();
                //  $('#SelectedRowList').append('No row selected! Select rows to see here...');
              }
          }
       

        });
            $('#LoadRecordsButton').click(function (e) {
                e.preventDefault();
            $('#StudentTableContainer').jtable('load',{
               
                date: $('#datenamecheckresearch').val()
            });
                

            //Load all records when page is first s    $('#LoadRecordsButton').click();
        });
            $('#LoadRecordsButton').click();
        });
       
 </script>

</div>
@*
 <script type="text/javascript">

 $('#userTableContainer').jtable({
  
            recordsLoaded: function(event, data) {
                $('.jtable-data-row').click(function() {
                    var row_id = $(this).attr('data-record-key');
                    alert('clicked row with id '+row_id);
                });
            }
        });
 </script>

<div id="content">
    <h1>Users</h1>      

    <br />
    <div id="userTableContainer">

    </div>
</div>*@
    </!-->